<template>
  <a-card :bordered="false">
    <a-form :form="form">
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="机构名称">
        <a-input placeholder="请输入机构/部门名称" v-decorator="['departName', {rules: [{required: true, message: '请输入机构/部门名称!'}]} ]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门">
        <tree-select
          disabled
          style="width:100%"
          :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
          :treeData="treeData"
          placeholder="无"
          v-decorator="['parentId', {} ]"
        >
        </tree-select>
      </a-form-item>
      <a-form-item
        v-if="!isAdd"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="机构编码">
        <a-input disabled placeholder="请输入机构编码" v-decorator="['orgCode', {rules: [{required: true, message: '请输入机构编码!'}]} ]"/>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="机构类型">
        <template v-if="model.orgCategory === '1'">
          <a-radio-group v-decorator="['orgCategory', {rules: [{required: true, message: '请输入机构类型!'}]}]" placeholder="请选择机构类型">
            <a-radio value="1">
              公司
            </a-radio>
          </a-radio-group>
        </template>
        <template v-else>
          <a-radio-group v-decorator="['orgCategory', {rules: [{required: true, message: '请输入机构类型!'}]}]" placeholder="请选择机构类型">
            <a-radio value="2">
              部门
            </a-radio>
            <a-radio value="3">
              岗位
            </a-radio>
          </a-radio-group>
        </template>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="排序">
        <a-input-number v-decorator="[ 'departOrder',{'initialValue':0}]"/>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="手机号">
        <a-input placeholder="请输入手机号" v-decorator="['mobile', {'initialValue':''}]"/>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="地址">
        <a-input placeholder="请输入地址" v-decorator="['address', {'initialValue':''}]"/>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="备注">
        <a-textarea placeholder="请输入备注" v-decorator="['memo', {'initialValue':''}]"/>
      </a-form-item>
    </a-form>
    <div class="anty-form-btn" v-if="!isAdd">
      <a-button @click="edit" type="primary" htmlType="button" icon="form">修改并保存</a-button>
    </div>
  </a-card>
</template>

<script>
import { TreeSelect } from 'ant-design-vue'
import pick from 'lodash.pick'
import { apiEditDepart } from '@/api/system'

export default {
  name: 'DepartForm',
  components: {
    TreeSelect
  },
  props: {
    // 部门树
    treeData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 表单数据
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 是否是新增弹出的模态框
    isAdd: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      model: {}
    }
  },
  watch: {
    formData (val) {
      this.setFormValue(val)
    }
  },
  methods: {
    setFormValue (val) {
      this.model = Object.assign({}, val)
      console.log(this.model)
      if (JSON.stringify(this.model) !== '{}') {
        this.form.setFieldsValue(this.form.setFieldsValue(pick(this.model, 'departName', 'parentId', 'orgCategory', 'orgCode', 'departOrder', 'mobile', 'address', 'memo')))
      } else {
        this.form.resetFields()
      }
    },
    edit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          const formData = Object.assign(this.model, values)
          apiEditDepart(formData).then(res => {
            console.log(res)
            if (res.success) {
              this.$message.success('保存成功!')
              this.$emit('ok')
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.anty-form-btn {
  width: 100%;
  text-align: center;
}
.ant-btn {
  margin-left: 3px
}
</style>
